<template>
    <el-dialog v-model="visible" title="分配角色" :before-close="beforeClose">
        <el-form :model="ownForm">
            <el-form-item label="账号">
                <el-input v-model="ownForm.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="ownForm.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="ownForm.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="ownForm.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="ownForm.note" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注">
                <el-radio-group v-model="ownForm.status">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="2" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, withDefaults, defineEmits, type Ref, watch } from "vue"
import type { IAdminListItem } from "@/request/UmsAdminController/index"


// props
let props = withDefaults(defineProps<{
    visible: boolean;
    form: IAdminListItem
}>(), {
    visible: true
})

// 监听传进来的form，然后把每次传进来的form做一个深拷贝，生成一个专门用在当前组件的一个行数据
let originOwnForm = ref({}) as Ref<IAdminListItem> //新增一个备份
let ownForm = ref({}) as Ref<IAdminListItem>
watch(
    // 当父组件传入的是引用类型数据，在子组件中应该通过函数返回值的方式监听
    () => props.form,
    (newVal) => {
        // console.log(newVal);
        ownForm.value = { ...newVal }
        originOwnForm.value = { ...newVal }
        // console.log(ownForm);
    }
)
// 自定义事件
let emits = defineEmits<{
    (event: "cancel"): void
    (event: "confirm", row: IAdminListItem): void
}>()
// 取消
let onCancel = () => {
    ownForm.value = { ...originOwnForm.value }//点击取消的时候吧ownForm恢复成备份的值
    // originOwnForm.value = {} as IAdminListItem
    emits("cancel")
}
// 确定
let onConfirm = () => {
    emits("confirm", ownForm.value)
}
let beforeClose = (done: any) => {
    emits("cancel")
}
</script>